<!--
 * @Author: 王坤
 * @LastEditors: 王坤
 * @Description: 卡账号
-->
<template>
  <div class="lc-input-icCard">
    <div v-if="magnify && showMagnify" class="lc-input-icCard__magnify">
      {{ magnifyLabel }}
    </div>
    <el-input
      type="text"
      v-model="innerValue"
      v-bind="$attrs"
      :disabled="disabled"
      :placeholder="placeholder"
      @input="handleInput"
      @blur="handleBlur"
      @focus="handleFocus"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { splitString } from '@/utils/index';

const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  //输入提示语
  placeholder: {
    type: String,
    default: ''
  },
  // 默认是否方式配置
  inputWay: {
    type: String,
    default: ''
  },
  // 外设读取失败时是否允许手输
  canManual: {
    type: Boolean,
    default: true
  },
  // 是否显示放大框
  magnify: {
    type: Boolean,
    default: true
  },
  // 卡/账号校验服务
  validateService: {
    type: String,
    default: ''
  },
  // 卡/账号查询服务
  searchService: {
    type: String,
    default: ''
  }
});
const emits = defineEmits(['update:modelValue']);
const innerValue = ref(props.modelValue);
const showMagnify = ref(false);
const magnifyLabel = computed(() =>
  innerValue.value ? splitString(innerValue.value, '4', ' ') : innerValue.value
);
watch(innerValue, (newVal) => emits('update:modelValue', newVal));
function handleInput(v) {
  innerValue.value = v.replace(/[\D]/g, '');
}
function handleBlur(e) {
  showMagnify.value = false;
}
function handleFocus(e) {
  showMagnify.value = true;
}
</script>
<style lang="scss">
.lc-input-icCard {
  position: relative;
  &__magnify {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    word-break: break-word;
    background: #f6f6f6;
    color: #ff984c;
    font-size: 24px;
    line-height: 1;
  }
}
</style>
